<template>
  <div>
    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"/>
    <div>
      <el-tree
        ref="tree"
        :filter-node-method="filterNode"
        :data="data"
        :props="defaultProps"
        :default-expand-all="true"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              v-if="data.parentId==='0'"
              icon="el-icon-plus"
              type="text"
              size="mini"
              @click="() => append(data)"/>
            <el-button
              icon="el-icon-edit"
              type="text"
              size="mini"
              @click="() => edit(data)"/>
            <el-button
              icon="el-icon-delete"
              type="text"
              size="mini"
              @click="() => remove(node, data)"/></span>
        </span>
      </el-tree>
      <el-dialog :visible.sync="dialogFormVisible" :title="title">
        <el-form >
          <el-form-item :label-width="formLabelWidth" label="课程分类标题">
            <el-input v-model="subject.title" auto-complete="off"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="课程排序">
            <el-input-number v-model="subject.sort" :min="0" controls-position="right"/>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</div></template>
<script>
import subjectApi from '@/api/subject'
export default {
  data() {
    return {
      title: '更新课程分类',
      formLabelWidth: '120px',
      dialogFormVisible: false,
      filterText: '',
      subject: { sort: '' },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  watch: {// 对属性值改变的监听，一旦改变立即回调
    filterText(val) {
      // filterText值改变后我们希望对el-tree中的数据进行过滤
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getNestedSubjects()
  },
  methods: {
    // 提交更新课程确认的单击事件
    handleSubmit() {
      if (this.subject.id) {
        subjectApi.updateById(this.subject).then(r => {
          this.$message.success('更新课程分类成功')
          this.subject = { sort: 0 }
          this.dialogFormVisible = false
          this.getNestedSubjects()
        })
      }
      subjectApi.save(this.subject).then(r => {
        console.log(this.subject)
        this.$message.success('新增课程成功')
        this.dialogFormVisible = false
        this.getNestedSubjects()
      })
    },
    // 添加课程
    append(data) { // data要新增的分类的父分类
      // console.log(data)
      this.title = '新增课程分类'
      this.subject = { sort: 0 }
      this.subject.parentId = data.id// 父分类的id设置给子分类的parentId
      this.dialogFormVisible = true
    },
    // 更新课程分类
    edit(data) {
      // console.log(data)
      // 弹出对话框之前先对最新的数据进行查询操作
      this.title = '更新课程分类'
      subjectApi.getById(data.id).then(r => {
        console.log(r.data.item)
        this.subject = r.data.item
        this.dialogFormVisible = true
      })
    },

    remove(node, data) {
      // console.log(node, data)
      if (data.children && data.children.length > 0) {
        this.$message.warning('存在子分类')
      }
      this.$confirm(`此操作将永久删除${data.title}分类, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        subjectApi.deleteById(data.id).then(r => {
          this.getNestedSubjects()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    filterNode(val, data) { // val表示filterText监听到的最新的值，data表示过滤时正在过滤的节点的json对象(课程分类json对象)
      // 如果正在过滤的节点的标题中含有val值则显示，否则过滤掉
      if (!val) { // val值没有时  显示所有
        return true
      }
      return data.title.toUpperCase().indexOf(val.toUpperCase()) !== -1
    },
    getNestedSubjects() {
      subjectApi.getNestedSubjects().then(r => {
        this.data = r.data.items
      })
    }
  }
}
</script>
